import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';

import 'hero_image_fade_route.dart';
import 'slide_hero_image_page.dart';

/// 单图片点开查看大图小部件
class HeroImageWidget extends StatefulWidget {
  const HeroImageWidget(
    this.imageUrl, {
    required this.heroTag,
    Key? key,
    this.reLoadImage = false,
  }) : super(key: key);

  /// 图片URL全路径
  final String imageUrl;

  /// 确保唯一性(防止hero报错),
  /// 不传时,默认为图片Url
  final String heroTag;

  /// 加载失败后,是否点击刷新
  final bool reLoadImage;

  @override
  _HeroImageWidgetState createState() => _HeroImageWidgetState();
}

class _HeroImageWidgetState extends State<HeroImageWidget> {
  late String _imageUrl;

  late String _heroTag;

  @override
  void initState() {
    _imageUrl = widget.imageUrl;
    _heroTag = widget.heroTag;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ExtendedImage.network(
      _imageUrl,
      clearMemoryCacheIfFailed: true,
      loadStateChanged: _loadStateChanged,
      fit: BoxFit.cover,
    );

    // 使用Stack加载两个图片,防止Hero跳转后底部空白
    // return Stack(
    //   fit: StackFit.expand,
    //   children: [
    //     loadNetworkImage(_imageUrl),
    //     ExtendedImage.network(
    //       _imageUrl,
    //       clearMemoryCacheIfFailed: true,
    //       loadStateChanged: _loadStateChanged,
    //       fit: BoxFit.cover,
    //     ),
    //   ],
    // );
  }

  Widget? _loadStateChanged(ExtendedImageState state) {
    Widget? childWidget;
    switch (state.extendedImageLoadState) {
      case LoadState.loading:
        // childWidget = Container(
        //   color: Colors.black12,
        //   alignment: Alignment.center,
        //   child: CircularProgressIndicator(
        //     strokeWidth: 2.0,
        //     valueColor: AlwaysStoppedAnimation<Color>(
        //       Theme.of(context).primaryColor,
        //     ),
        //   ),
        // );
        break;
      case LoadState.completed:
        // 如果在构建前不能知道图像大小，
        // 你必须处理剪辑时，图像加载。
        // 所以也许你的加载小部件的大小会不一样
        // 作为图像实际大小，设置returnLoadStateChangedWidget=true，因此
        // 图像将不会被第一次为ExtendedImage设置的大小所限制。
        // state.returnLoadStateChangedWidget = !knowImageSize;

        // 如果您不想覆盖已完成的小部件
        // 请返回null或state.completedWidget
        childWidget = Hero(
          tag: "$_heroTag",
          child: ExtendedRawImage(
            image: state.extendedImageInfo?.image,
            fit: BoxFit.cover,
          ),
        );
        break;
      case LoadState.failed:
        if (widget.reLoadImage) {
          childWidget = GestureDetector(
            child: Container(
              color: Colors.black12,
              child: Icon(
                Icons.refresh,
                size: 36,
                color: Colors.black12,
              ),
            ),
            onTap: () {
              state.reLoadImage();
            },
          );
        } else {
          childWidget = Hero(
            tag: "$_heroTag",
            child: Image.asset(
              'assets/images/public/default.png',
              fit: BoxFit.cover,
            ),
          );
        }
        break;
    }
    // 加载完成或者加载失败后, 判断是否需要点击重新加载,否则点击放大
    if (state.extendedImageLoadState != LoadState.loading &&
        !widget.reLoadImage) {
      childWidget = GestureDetector(
        child: childWidget,
        onTap: () {
          Navigator.of(context).push(
            HeroImageFadeRoute(
              page: SlideHeroImagePage(
                imageUrl: _imageUrl,
                heroTag: _heroTag,
              ),
            ),
          );
        },
      );
    }
    return childWidget;
  }
}
